<template>
        <div class="sdy-home-grid">
            <van-swipe class="my-swipe box" indicator-color="red">
                <van-swipe-item class="swip-item">
                    <van-grid :column-num="5" :gutter="4" class="a">
                        <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img" :text="item.title" />
                    </van-grid>
                </van-swipe-item>
                <van-swipe-item>
                    <van-grid :column-num="5" :gutter="10">
                        <van-grid-item class="grid-item" v-for="item in lists" :key="item.id" :icon="item.img" :text="item.title" />
                    </van-grid>
                </van-swipe-item>



                
            </van-swipe>
        </div>
</template>

<script name='sdyGrid' setup lang='ts'>
import { reactive } from 'vue'

// 自己准备数据
const list = [
  { id: 1, title: '京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, title: '京东优品', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png' },
  { id: 3, title: '数码3C', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
  { id: 4, title: '京东生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
  { id: 5, title: '小时送达', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/97574/40/22764/2060/64a4ff80Fd550d65e/eeea8b95458cc7fd.png' },
  { id: 6, title: '附近小店', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
  { id: 7, title: '小飞机', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png' },
  { id: 8, title: 'PLUS会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png' },
  { id: 9, title: '京东国籍', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png' },
  { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' }
]
const lists = [
  { id: 9, title: '京东国籍', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png' },
  { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 5, title: '小时送达', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/97574/40/22764/2060/64a4ff80Fd550d65e/eeea8b95458cc7fd.png' },
  { id: 6, title: '附近小店', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
  { id: 7, title: '小飞机', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png' }
]

// 自己准备接口
interface CateItemInfo {
  id: number
  img: string
  title: string
}

const cateList: CateItemInfo[] = reactive(list)
</script>

<style lang='scss' scoped>
.sdy-home-grid{
    height: 150px;
}
.swip-item{
    padding-bottom: 10px;
}
</style>